<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>康复训练</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/rehabilitation.css">
    <link rel="stylesheet" href="styles/theme.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles/readAloud.css">
    <script src="js/readAloud.js"></script>
</head>
<body>
<!-- 返回按钮 - 请添加到<body>标签开始位置之后 -->
<a href="index.html" class="fixed top-4 left-4 z-50 flex items-center justify-center w-12 h-12 rounded-full bg-white shadow-lg text-primary hover:bg-primary hover:text-white transition-all duration-300">
    <i class="fa fa-arrow-left text-xl"></i>
</a>
    <div class="container">
        <h1 class="page-title">康复训练</h1>
        
        <!-- 残疾类型选择 -->
        <div class="disability-types">
            <div class="type-item active" data-type="vision">
                <i class="fa fa-eye"></i>
                <span>视力</span>
            </div>
            <div class="type-item" data-type="hearing">
                <i class="fa fa-deaf"></i>
                <span>听力</span>
            </div>
            <div class="type-item" data-type="speech">
                <i class="fa fa-comment"></i>
                <span>言语</span>
            </div>
            <div class="type-item" data-type="physical">
                <i class="fa fa-wheelchair"></i>
                <span>肢体</span>
            </div>
            <div class="type-item" data-type="intellectual">
                <i class="fa fa-brain"></i>
                <span>智力</span>
            </div>
        </div>

        <!-- 视频播放区域 -->
        <div class="video-container">
            <div class="video-player">
                <video id="rehabVideo" controls poster="img/视力问题.jpeg">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <div class="video-info">
                <h2 class="video-title">请选择残疾类型查看相关康复训练视频</h2>
                <p class="video-desc"></p>
            </div>
        </div>

        <!-- 视频列表 -->
        <div class="video-list">
            <h3 class="list-title">推荐视频</h3>
            <div class="video-items">
                <!-- 视力康复视频 -->
                <div class="video-item" data-type="vision">
                    <div class="video-thumbnail">
                        <img src="img/视频封面.png" height="224" width="325"/>
                        <span class="duration">15:30</span>
                    </div>
                    <div class="video-info">
                        <h4>视力康复基础训练</h4>
                        <p>通过专业训练方法提升视觉感知能力</p>
                    </div>
                </div>
                <div class="video-item" data-type="vision">
                    <div class="video-thumbnail">

                        <img src="img/视频封面.png" height="224" width="325"/><span class="duration">12:45</span>
                    </div>
                    <div class="video-info">
                        <h4>视觉追踪训练</h4>
                        <p>提高眼球运动控制和视觉追踪能力</p>
                    </div>
                </div>

                <!-- 听力康复视频 -->
                <div class="video-item" data-type="hearing">
                    <div class="video-thumbnail">
                        <img src="img/hearing-rehab1.jpg" alt="听力康复训练">
                        <span class="duration">18:20</span>
                    </div>
                    <div class="video-info">
                        <h4>听力康复基础训练</h4>
                        <p>通过声音识别训练提升听觉能力</p>
                    </div>
                </div>
                <div class="video-item" data-type="hearing">
                    <div class="video-thumbnail">
                        <img src="img/hearing-rehab2.jpg" alt="听力康复训练">
                        <span class="duration">14:15</span>
                    </div>
                    <div class="video-info">
                        <h4>声音定位训练</h4>
                        <p>提高声音方向识别和定位能力</p>
                    </div>
                </div>

                <!-- 言语康复视频 -->
                <div class="video-item" data-type="speech">
                    <div class="video-thumbnail">
                        <img src="img/speech-rehab1.jpg" alt="言语康复训练">
                        <span class="duration">20:10</span>
                    </div>
                    <div class="video-info">
                        <h4>言语康复基础训练</h4>
                        <p>通过发音训练提升语言表达能力</p>
                    </div>
                </div>
                <div class="video-item" data-type="speech">
                    <div class="video-thumbnail">
                        <img src="img/speech-rehab2.jpg" alt="言语康复训练">
                        <span class="duration">16:30</span>
                    </div>
                    <div class="video-info">
                        <h4>语言理解训练</h4>
                        <p>提高语言理解和表达能力</p>
                    </div>
                </div>

                <!-- 肢体康复视频 -->
                <div class="video-item" data-type="physical">
                    <div class="video-thumbnail">
                        <img src="img/physical-rehab1.jpg" alt="肢体康复训练">
                        <span class="duration">25:40</span>
                    </div>
                    <div class="video-info">
                        <h4>肢体康复基础训练</h4>
                        <p>通过运动训练提升肢体功能</p>
                    </div>
                </div>
                <div class="video-item" data-type="physical">
                    <div class="video-thumbnail">
                        <img src="img/physical-rehab2.jpg" alt="肢体康复训练">
                        <span class="duration">22:15</span>
                    </div>
                    <div class="video-info">
                        <h4>平衡能力训练</h4>
                        <p>提高身体平衡和协调能力</p>
                    </div>
                </div>

                <!-- 智力康复视频 -->
                <div class="video-item" data-type="intellectual">
                    <div class="video-thumbnail">
                        <img src="img/intellectual-rehab1.jpg" alt="智力康复训练">
                        <span class="duration">19:25</span>
                    </div>
                    <div class="video-info">
                        <h4>认知能力训练</h4>
                        <p>通过认知训练提升思维能力</p>
                    </div>
                </div>
                <div class="video-item" data-type="intellectual">
                    <div class="video-thumbnail">
                        <img src="img/intellectual-rehab2.jpg" alt="智力康复训练">
                        <span class="duration">17:50</span>
                    </div>
                    <div class="video-info">
                        <h4>注意力训练</h4>
                        <p>提高注意力和专注能力</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/rehabilitation.js"></script>
</body>
</html> 